<style scoped>
.nav_top{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.nav_top img{
    height: 100px;
    margin-right: 10%;
}
.test{
    width:100%;
    padding-inline-start: 20px;
    padding-bottom: 20px;
    list-style-type: none;
    position: absolute;
    z-index: 9999;
    top: 40px;
    background-color: white;
}
.test li{
    cursor: pointer;
}
.test li:hover{
    background-color: aliceblue;
}

</style>

<template>
    <div class="nav_top">
        <img :src="require('../assets/petstoreLOGO.png')" alt="" @click="toIndex">
        <div style="width:100%;position:relative"> 
            <el-input placeholder="请输入内容" v-model="search_content" @input="inputFun"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
            <ul class="test" v-show="show_box">
                <li v-for="(item,index) in search_list" :key="index" @click="toCategory(item.name,item.category)">{{item.name}}</li>  
            </ul>
        </div>
        <el-button icon="el-icon-search" circle style="margin-right:10%" @click="search"></el-button>
        <el-button type="primary" v-show="is_login" @click="toLogin"> 登录 </el-button>
        <el-dropdown type="primary" v-show="!is_login" @command="toPage">
            <el-button class="el-dropdown-link">
                {{lastname}}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="orders">订单管理</el-dropdown-item>
                <el-dropdown-item command="cart">购物车</el-dropdown-item>
                <el-dropdown-item command="mine">个人信息</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
import router from '@/router';
export default {
    name: 'nav-top',
    data() {
        return{
            is_login:false,
            lastname: '',
            search_content:'',
            show_box: false,
            search_list: [],
        }
    },
    mounted(){
        if(localStorage.getItem("token") == null){
            this.is_login = true;
        }
        else{
            this.is_login = false;
            this.lastname = sessionStorage.getItem("lastname")
        }
    },
    methods: {
        toLogin(){
            router.push("/login");
        },
        toPage(command){
            let path = '/' + command;
            router.push(path);
        },
        toIndex(){
            router.push('/');
        },
        search(){
            router.push({
                path: '/search',
                query:{
                    'key': this.search_content
                }
            })
        },
        inputFun(){
            this.show_box = this.search_content.length>0?true:false;
            this.$Axios({
                method: 'get',
                url: '/catalog/search-command',
                params:{
                    name: this.search_content
                }
            }).then(res=>{
                this.search_list = res.data.data;
            }).catch(error=>{
                this.$message.error("其他服务器错误"+error);
            })
        },
        toCategory(name,category){
            router.push('/category/'+ category + '/?id=' + name);
        }
    }
}
</script>